<template>



  <div class="divcss2">

    <div class="divcss3">
      <h3>查询条件</h3>
      <el-divider></el-divider>
      订单号:<el-input
      placeholder=""
      prefix-icon="el-icon-search"
      v-model="orderId"
      style="width: 25%;margin-bottom: 15px"
    >
    </el-input>

      客户名称:<el-input
      placeholder=""
      prefix-icon="el-icon-search"
      v-model="comsuName"
      style="width: 25%;margin-bottom: 15px"
    >
    </el-input>

      <el-button @click="search" type="success"> 查询</el-button>
    </div>

    <div class="divcss4">
      <h3>应收明细</h3>
      <el-divider></el-divider>
      <el-button icon="el-icon-circle-plus-outline" @click="createBill" style="margin-bottom: 20px">生成对账单</el-button>
      <!--    订单状态切换查看-->
      <el-row style="margin-bottom: 10px">
        <el-button type="info" round @click="billStatus=0,findBills()">未提交<font color="#8b0000" v-model="total" v-if="total !== 0 && billStatus === 0">({{total}})</font></el-button>
        <el-button type="info" round @click="billStatus=1,findBills()">已提交<font color="#8b0000" v-model="total" v-if="total != 0 && billStatus === 1">({{total}})</font></el-button>
        <el-button type="info" round @click="billStatus=2,findBills()">全部<font color="#8b0000" v-model="total" v-if="total != 0 && billStatus === 2">({{total}})</font></el-button>
      </el-row>
      <el-table
        ref="arr"
        :data="bills"
        border
        style="width: 1200px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="orderid"
          label="订单id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="order.customerName"
          label="客户名称"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="receipt.rTime"
          label="签收时间"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="totalVolum"
          label="总体积(m³)"
          width="100"
          :formatter="formatterLevel"
        >
        </el-table-column>
        <el-table-column
          prop="totalWeight"
          label="总重量(Kg)"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="expenseinfo.totalFreight"
          label="运费总计"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="expenseinfo.totalExpenses"
          label="费用合计"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="expenseinfo.advanceCharge"
          label="预付款"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="expenseinfo.collectionAmount"
          label="代收金额"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="expenseinfo.totalReceivable"
          label="应收总计"
          width="100"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="danger" size="small">管理</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

<!--      <el-button @click="test"> 测试</el-button>-->
    </div>
    <el-dialog title="对账明细" :visible.sync="dialogFormVisible" width="1200px" height="3000px">
      <div class="divcss1">
        <h2>基本信息</h2>
        <el-divider></el-divider>

        <el-form :inline="true" :model="bill" class="demo-form-inline">
          <el-col span="10">
            <el-form-item label="派车单号:">
              <el-input v-model="bill.dispatchNo" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="订单编号:">
              <el-input v-model="bill.orderid" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="承运商:">
              <el-input v-model="bill.carrierName" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="签收日期:">
              <el-col >
                <el-date-picker type="datetime" value-format="yyyy-MM-dd hh-mm-ss" placeholder="选择日期" v-model="bill.receipt.rTime" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div class="divcss5">
        <h2>
          结算信息
        </h2>
        <el-divider></el-divider>
        <el-form :inline="true" :model="bill" class="demo-form-inline">

          <el-col span="8">
            <el-form-item label="运费单价(m³):">
              <el-input v-model="bill.expenseinfo.volumeUnitPrice"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="运费单价(kg):">
              <el-input v-model="bill.expenseinfo.weightUnitPrice"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="运费合计:">
              <el-input v-model="bill.expenseinfo.totalFreight"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="提货费:">
              <el-input v-model="bill.expenseinfo.deliveryFee" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="装卸费:">
              <el-input v-model="bill.expenseinfo.handlingCharges" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="包装费:">
              <el-input v-model="bill.expenseinfo.packingFee" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="保险费:">
              <el-input v-model="bill.expenseinfo.insurancePremium" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="中转费:">
              <el-input v-model="bill.expenseinfo.transitFee" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="费用合计:">
              <el-input v-model="bill.expenseinfo.totalExpenses" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <h3>赔偿金额</h3>
<!--          <el-table-->
<!--            :data="bill.exceptionRegistration"-->
<!--            height="250"-->
<!--            border-->
<!--            style="width: 100%">-->
<!--            <el-table-column-->
<!--              prop="id"-->
<!--              label="异常单"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="createdTime"-->
<!--              label="发生日期"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="exceptionType"-->
<!--              label="金额"-->
<!--            >-->
<!--            </el-table-column>-->
<!--          </el-table>-->
          <el-col span="8">
            <el-form-item label="异常单:">
              <el-input v-model="bill.exceptionRegistration.id" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="发生日期:">
              <el-input v-model="bill.exceptionRegistration.createdTime" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="赔偿金额:">
              <el-input v-model="bill.exceptionHandling.commitmentAmount" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>


          <el-col span="8">
            <el-form-item label="应收总计:" style="margin-top: 20px">
              <el-input v-model="bill.expenseinfo.totalReceivable" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="预付款:" style="margin-top: 20px">
              <el-input v-model="bill.expenseinfo.advanceCharge" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="代收金额:" style="margin-top: 20px">
              <el-input v-model="bill.expenseinfo.advanceCharge" placeholder="0.00"></el-input>
            </el-form-item>
          </el-col>

          <h3>结算方式:</h3>

          <el-checkbox v-model="bill.expenseinfo" >现结</el-checkbox>

        </el-form>

        <h3>银行账户信息:</h3>

        <div class="descript">
              收款单位：&nbsp;&nbsp;&nbsp;<el-descriptions-item  >kooriookami</el-descriptions-item><br>

              开户行: &nbsp;&nbsp;&nbsp;<el-descriptions-item >18100000000</el-descriptions-item><br>

              账户: &nbsp;&nbsp;&nbsp;<el-descriptions-item >18100000000</el-descriptions-item>
        </div>

      </div>
      <div class="footer">

        <el-button @click="dialogFormVisible = false" >查看订单明细</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conFirmBill" >确 认</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>

      </div>

      <div class="orderbasicinfo">
        <el-form :inline="true" :model="bill" class="demo-form-inline">
          <el-col span="10">
            <el-form-item label="订单来源:">
              <el-input v-model="bill.orderbasicinfo.ordersources" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="客户合同:">
              <el-input v-model="bill.orderbasicinfo.customerContract" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="运输方式:">
              <el-input v-model="bill.orderbasicinfo.transType" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="订单类型:">
              <el-input v-model="bill.orderbasicinfo.orderType" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="接单日期:">
              <el-input v-model="bill.orderbasicinfo.receiptDate" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="操作人:">
              <el-input v-model="bill.orderbasicinfo.operator" placeholder=""></el-input>
            </el-form-item>
          </el-col>

            <el-form-item label="订单备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                maxlength="30"
                v-model="bill.orderbasicinfo.remarks">
              </el-input>
            </el-form-item>
        </el-form>
      </div>

      <div class="addinfo">

        <h3>提货地信息</h3>
        <el-divider></el-divider>

        <el-form :inline="true" :model="bill" class="demo-form-inline">
          <el-col span="6">
            <el-form-item label="发货单位:">
              <el-input v-model="bill.addrinfo.forwardingUnit" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="联系人:">
              <el-input v-model="bill.addrinfo.shipmentContact" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="电话:">
              <el-input v-model="bill.addrinfo.shipmentTelephone" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="手机:">
              <el-input v-model="bill.addrinfo.shipmentMobilephone" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="20">
            <el-form-item label="详细地址:">
              <el-input size="medium" v-model="bill.addrinfo.shippingDetailAddress" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="取货时间说明:">
              <el-input v-model="bill.addrinfo.pickupTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="要求提货日期:">
              <el-input v-model="bill.addrinfo.requiredPickupTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-form>

      </div>

      <div class="addinfo1">

        <h3>收货地信息</h3>
        <el-divider></el-divider>

        <el-form :inline="true" :model="bill" class="demo-form-inline">
          <el-col span="6">
            <el-form-item label="收货单位:">
              <el-input v-model="bill.addrinfo.receivingUnit" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="联系人:">
              <el-input v-model="bill.addrinfo.harvestContact" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="电话:">
              <el-input v-model="bill.addrinfo.receivingTelephone" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="6">
            <el-form-item label="手机:">
              <el-input v-model="bill.addrinfo.receivingMobilephone" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="20">
            <el-form-item label="详细地址:">
              <el-input size="medium" v-model="bill.addrinfo.receivingDetailAddress" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="收货时间说明:">
              <el-input v-model="bill.addrinfo.receivingTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="要求到货日期:">
              <el-input v-model="bill.addrinfo.requestedReceiptTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="代收金额:">
              <el-input v-model="bill.expenseinfo.collectionAmount" placeholder=""></el-input>
            </el-form-item>
          </el-col>

          <el-col span="10">
            <el-form-item label="回单类型:">
              <el-input v-model="bill.addrinfo.receiptType" placeholder=""></el-input>
            </el-form-item>
          </el-col>

        </el-form>

      </div>

      <div class="goodsinfo">

        <h3>货物明细</h3>

        <el-divider></el-divider>

        <el-table
          :data="bill.goodsinfos"
          height="200"
          style="width: 100%">
          <el-table-column
            prop="goodsName"
            label="货物名称"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量"
          >
          </el-table-column>
          <el-table-column
            prop="unitWeight"
            label="单件重量"
          >
          </el-table-column>

          <el-table-column
            prop="length"
            label="长"
          >
          </el-table-column>

          <el-table-column
            prop="wide"
            label="宽"
          >
          </el-table-column>

          <el-table-column
            prop="high"
            label="高"
          >
          </el-table-column>

          <el-table-column
            prop="monomerVolume"
            label="单件体积"
          >
          </el-table-column>

          <el-table-column
            prop="packing"
            label="包装"
          >
          </el-table-column>

          <el-table-column
            prop="transportationConditions"
            label="运输条件"
          >
          </el-table-column>

        </el-table>


      </div>

    </el-dialog>

  </div>

</template>

<script>
    export default {
      data(){
        return {
          arr:[],
          dialogFormVisible: false,
          orderId:"",
          comsuName:"",
          bills:[],
          compensation:[],
          multipleSelection: [],
          billStatus:2,
          bill:{
            expenseinfo:{},
            receipt:{},
            orderbasicinfo:{},
            addrinfo:{},
            exceptionRegistration:{},
            exceptionHandling:{},
            goodsinfos:[]
            },
          currentPage:1,
          pageSizes:[2,3,4],
          pageSize:2,
          total:0,
        }
      },
      methods:{
        findBills(){
          this.$http({
            method:"GET",
            url:"http://localhost/bill/lists",
            params:{
              currentPage:this.currentPage,
              pageSize:this.pageSize,
              orderId:this.orderId,
              comsuName:this.comsuName,
              billStatus:this.billStatus
            }
          }).then(resp=>{
            console.log(resp.data);
            this.bills = resp.data.data.list;
            this.total = resp.data.data.total;
          })
        },

        handleSizeChange(val){
          this.pageSize = val;
          this.findBills();
        },

        handleCurrentChange(val){
          this.currentPage = val;
          this.findBills();
        },

        search(){
          this.findBills();
        },
        findBillById(id){
          this.$http({
            method:"GET",
            url:"http://localhost/bill/list",
            params:{
              id:id
            }
          }).then(resp=>{
            console.log(resp.data.data);
            this.bill = resp.data.data;
          })
        },

        handleClick(row){
          console.log(row.orderid);
          let rid = row.orderid;
          this.dialogFormVisible= true;
          this.findBillById(rid);
        },
        createBill(){
          console.log(this.arr);
          this.$http({
            method:"POST",
            url:"http://localhost/billStatement",
            data:this.arr
          }).then(resp=>{
            if(resp.data.code==100000){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
            }
          })
        },
        conFirmBill(){
          this.bill.status = 1;
          this.$http({
            method:"PUT",
            url:"http://localhost/bill",
            data:this.bill
          }).then(resp=>{
            if(resp.data.code==100000){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.dialogFormVisible = false;
            }
          })
        },

        handleSelectionChange(val) {
          this.arr = val;
          console.log(this.arr.length);
        },
        test(){
          this.dialogFormVisible= true;
        }
      },
      created() {
        this.findBills();
      }

    }
</script>

<style>
  .divcss1{
    background-color: #d3dce6;
    height: 200px;
    border: 1px;
  }
  .divcss2{
    border:1px;
    border-radius: 2px;
    margin-left: 40px;
  }
  .divcss3{
    border:1px;
    border-radius: 5px;
    height: 120px;
    width: 1200px;
    background-color: #F2F6FC;
  }
  .divcss4{
    border:1px;
    border-radius: 5px;
    height: 350px;
    width: 1200px;
    background-color: #F2F6FC;
  }
  .divcss5{
    border:1px;
    border-radius: 5px;
    height: 850px;
    background-color: #F2F6FC;
  }
  .descript{
    margin-top: 15px;
    border: 1px;
    height: 100px;
    width: 400px;
    line-height: 30px;
    background-color: #bfcbd9;
  }
  .footer{

    margin-top: 20px;
    margin-left: 400px;
  }

  .orderbasicinfo{

    margin-top: 30px;
    height:250px;
    background-color: #F2F6FC;
  }
  .addinfo{
    margin-top: 30px;
    height:250px;
    background-color: #F2F6FC;
  }

  .addinfo1{
    margin-top: 30px;
    height:300px;
    background-color: #F2F6FC;
  }

  .goodsinfo{
    margin-top: 30px;
    background-color: #F2F6FC;
  }

</style>


